html,
body {
  font-family: LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, Segoe UI, PingFang SC, Microsoft Yahei,
    Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.commonMaxWidth {
  max-width: $MainMaxWidth;
}

div,
p,
main,
section,
article,
nav,
hgroup,
aside {
  scroll-behavior: smooth;
}

$directions: (
  'x': 'column',
  'y': 'row'
);
$sizes: (
  'xs': $flex-gutter-xs,
  'sm': $flex-gutter-sm,
  'md': $flex-gutter-md,
  'lg': $flex-gutter-lg,
  'xl': $flex-gutter-xl
);

@each $size, $value in $sizes {
  .gap-#{$size} {
    gap: $value;
    grid-gap: $value;
  }
}

@each $size, $value in $sizes {
  @each $xy, $direction in $directions {
    .gap-#{$xy}-#{$size} {
      #{$direction}-gap: $value;
      grid-#{$direction}-gap: $value;
    }
  }
}

.v-icon--is-component {
  fill: currentColor;
}

.noscrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(217, 237, 255, 0.3);
  border-radius: 10px;
  background-color: rgba(217, 237, 255, 0.1);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 9px;
  -webkit-box-shadow: inset 0 0 6px rgba(217, 237, 255, 0.5);
  background-color: rgba(101, 181, 255, 0.5);
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(101, 181, 255, 0.3);
}

.noPRInput {
  .q-field__control {
    padding-right: unset !important;
  }
}

.zebra-table {
  //斑马线
  tr:nth-child(even) {
    background-color: #f3f6f6;
  }
}

.popInput {
  .q-field__control {
    background: rgb(90 90 90 / 60%);
  }

  input,
  .q-field__suffix {
    color: white;
  }
}

.hoverClearInput {
  .q-field__append {
    display: none;
  }

  &:hover {
    .q-field__append {
      display: flex;
    }
  }
}

.alignRightSelect {
  .q-field__native {
    justify-content: end;
  }
}

.hoverAppendInput {
  .q-field__append {
    display: none;
  }

  &:hover {
    .q-field__append {
      display: flex;
    }
  }
}

.fullHeightArea {
  .q-textarea .q-field__control {
    height: 100% !important;
  }
}
